<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电影信息查询</title>

    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="./lib/layui/css/layui.css"/>
    <!--引入页面css-->
    <link rel="stylesheet" href="./css/Common.css">
    <link rel="stylesheet" href="./css/FilmSearchPage.css">
    <!-- 引入 layui.js -->
    <script src="./lib/layui/layui.js"></script>
    <!--引入jquery.js-->
    <script src="./lib/jquery-tool/jquery-3.4.1.min.js"></script>
    <!--引入axios-->
    <script src="./lib/axios-tool/axios.min.js"></script>
</head>
<body>
<!--头部导航-->
<div class="cinema-header-container"></div>


<!--<div class="film-search-all-container">-->
<!--    &lt;!&ndash;电影模块标题&ndash;&gt;-->
<!--    <fieldset class="layui-elem-field layui-field-title">-->
<!--        <legend style="font-size: 30px">电影列表</legend>-->
<!--    </fieldset>-->
<!--    &lt;!&ndash;电影模块卡片&ndash;&gt;-->
<!--    <div id="all-films-container" class="all-films-container"></div>-->

<!--    &lt;!&ndash;影厅模块&ndash;&gt;-->
<!--    <fieldset class="layui-elem-field layui-field-title">-->
<!--        <legend style="font-size: 30px">影厅列表</legend>-->
<!--    </fieldset>-->
<!--    &lt;!&ndash;影厅模块表格&ndash;&gt;-->
<!--    <table id="halls-table" lay-filter="halls-table"></table>-->
<!--</div>-->
<div class="layui-row">
<!--    页面左侧放置电影列表和影厅列表-->
    <div class="layui-col-md8 film-search-left">
        <div class="film-search-all-container">
            <!--电影模块标题-->
            <fieldset class="layui-elem-field layui-field-title">
                <legend style="font-size: 30px">电影列表</legend>
            </fieldset>
            <!--电影模块卡片-->
            <div id="all-films-container" class="all-films-container"></div>

            <!--影厅模块-->
            <fieldset class="layui-elem-field layui-field-title">
                <legend style="font-size: 30px">影厅列表</legend>
            </fieldset>
            <!--影厅模块表格-->
            <table id="halls-table" lay-filter="halls-table"></table>
        </div>
    </div>
<!--    页面右侧放置筛选表单以及筛选表格-->
    <div class="layui-col-md4 film-search-right">
        <div class="film-detail-search-container">
            <h2>电影放映详情查询</h2>
            <form class="layui-form layui-form-pane film-detail-search-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">电影名称</label>
                    <div class="layui-input-block">
                        <select name="filmId" lay-verify="required" id="film-name-select-box">
<!--                            <option value=""></option>-->
<!--                            <option value="0">北京</option>-->
<!--                            <option value="1">上海</option>-->
<!--                            <option value="2">广州</option>-->
<!--                            <option value="3">深圳</option>-->
<!--                            <option value="4">杭州</option>-->
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">影厅名称</label>
                    <div class="layui-input-block">
                        <select name="hallId" lay-verify="required" id="hall-name-select-box">
                            <option value=""></option>
                            <option value="0">北京</option>
                            <option value="1">上海</option>
                            <option value="2">广州</option>
                            <option value="3">深圳</option>
                            <option value="4">杭州</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">放映日期</label>
                        <div class="layui-input-block">
                            <input type="text" name="showDate" lay-verify="required" id="showDate" placeholder="选择日期" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item" style="text-align: center">
                        <button style="width: 50%" type="submit" class="layui-btn" lay-submit lay-filter="film-detail-search-form">
                             查询该电影放映信息
                        </button>
                </div>
            </form>
        </div>

    </div>
<!--    页面右侧存放查询电影票数-->
</div>


<script src="./js/Common.js"></script>
<script>
    axios.defaults.withCredentials = true;    //发送请求携带session信息
    //检查登录信息
    checkLogin();
    //设置顶部导航栏
    initNavHeader('film-search-item');
    var urlPrefix = 'http://localhost:9093';
    var filmArr = [];
    var hallArr = [];



    //发送请求获取所有电影信息
    axios({
        method: 'get',
        url: urlPrefix + '/film-info/getFilmsInfo'
    }).then(res => {
        //调用成功就继续逻辑
        if (res.data.status === 0) {
            // console.log(res.data);
            filmArr = res.data.data;
            console.log('filmArr', filmArr);
            //再发送请求获取所有的影厅信息
            axios({
                method: 'get',
                url: urlPrefix + '/film-info/getHallsInfoList'
            }).then(res => {
                //调用成功就继续逻辑
                if (res.data.status === 0) {
                    hallArr = res.data.data;
                    console.log('hallArr', hallArr);
                    //先生成所有的影片卡片
                    generateAllFilmsCard(filmArr);
                    //再生成影厅表格
                    generateHallsTable();

                    //给筛选表单增加监听
                    activateFilmDetailSearchForm();
                }
                else {
                    layer.msg(res.data.desc);
                }


            })
        } else {
            layer.msg(res.data.desc);
        }
    });


    /*
    0: {id: 1, filmId: "film_1", name: "少年的你", directorName: "曾国祥", description: "一场高考前夕的校园意外，改变了两个少年的命运。陈念（周冬雨饰）性格内向，是学校里的优等生，努力复习、…18岁这个夏天提前尝到了成人世界的漠然。一场秘而不宣的“战斗”正在上演，他们将一起守护少年的尊严。", …}
1: {id: 2, filmId: "film_2", name: "天气之子", directorName: "新海诚", description: "在高一的夏天，少年帆高（醍醐虎汰朗配音）离家出走，一个人来到东京。帆高好不容易找到一份工作，为一本古…！”雨便渐渐停下来，美丽的阳光洒落街上。原来，她拥有一股不可思议的能量，一股能让天空放晴的异力……", …}
2: {id: 3, filmId: "film_3", name: "唐人街探案2", directorName: "陈思诚", description: "秦风接到唐仁的邀请来纽约参加其与阿香的婚礼。壕气逼人的唐仁迎接秦风，极尽招摇。岂料“婚礼”是唐仁为巨…极其相似。原本锁定的凶手竟有了不在场证明，秦风不禁对自己的推理产生了怀疑。第三起案件发生连环案件。", …}
3: {id: 4, filmId: "film_4", name: "紫罗兰永恒花园 外传：永远与自动手记人偶", directorName: "藤田春香", description: "作为“战争机器”长大的女主人公薇尔莉特·伊芙加登（石川由依配音），在战争中失去双臂，并与收养她的少佐…美准确的文字传递着人们最为真挚的感情。外传的故事中，薇尔莉特·伊芙加登接到了一桩特殊的委托工作……", …}
4: {id: 5, filmId: "film_5", name: "阿凡达", directorName: "詹姆斯·卡梅隆", description: "战斗中负伤而下身瘫痪的前海军战士杰克·萨利（萨姆·沃辛顿 饰）决定替死去的同胞哥哥到潘多拉星控操纵格…公司可砍伐殆尽该地区的原始森林，开采地下昂贵的“不可得”矿。在探索潘多拉星的过程中，杰克遇到了纳美", …}
5: {id: 6, filmId: "film_6", name: "哥斯拉大战金刚", directorName: "
↵亚当·温加德", description: "影片中，这两位宛如神衹一般强大的对手于一场壮观的战争中相遇，彼时世界命运正悬于一线。为了找到真正的家…球引起了一系列破坏。一股无形的力量造成了这两只巨兽之间的巨大冲突，深藏在地心深处的奥秘也由此揭开。", …}

     */
    function generateAllFilmsCard(filmArr) {
        console.log(filmArr);
        var filmInfoHtml = '';
        for (var oneFilm of filmArr) {
            filmInfoHtml +=
                '<div id="' + oneFilm.filmId + '" class="film-card">' +
                '    <div class="film-card-picture">' +
                '        <img src="http://localhost:9999/' + oneFilm.filmId + '.jpg" alt="">' +
                '        <div class="film-name-text"><a title="' + oneFilm.name + '">' + oneFilm.name + '</a></div>' +
                '    </div>' +
                '    <div class="film-card-button">' +
                '        <button class="layui-btn layui-btn-primary layui-border-green check-film-info-btns">查看详情</button>' +
                '    </div>' +
                '</div>'

        }
        $('#all-films-container').html(filmInfoHtml);

        //给按钮增加监听
        $('.check-film-info-btns').click(function () {
            // console.log($(this.parentNode.parentNode).attr('id'));
            //获取点击按钮对应电影的filmId
            var filmId = $(this.parentNode.parentNode).attr('id');
            openFilmInfoLayer(filmId);
        })
    }

    function openFilmInfoLayer(filmId) {
        // layer.msg(filmId);
        //获取到对应的film
        var film = getFilmByFilmId(filmId, filmArr);
        var filmTypesArr = JSON.parse(film.filmTypes);
        console.log(filmTypesArr.toString());
        layer.open({
            type: 1
            ,title: film.name//不显示标题栏
            // ,closeBtn: true
            ,area: ['700px', '550px']
            ,shade: 0.5
            ,id: 'film-info-layer' //设定一个id，防止重复弹出
            ,btn: ['前往购票', '我再看看']
            ,btnAlign: 'c'
            ,moveType: 1 //拖拽模式，0或者1
            ,content:
                '<div class="layui-row layui-col-space25">' +
                '   <div class="layui-col-md5 layui-col-sm5 layer-img-container" >' +
                '       <img  src="http://localhost:9999/' + filmId + '.jpg"  alt="">' +
                '   </div>' +
                '   <div class="layui-col-md7 layer-info-container">' +
                '       <p class="layer-film-title">' + film.name + '</p>' +
                '       <p>类型：' + filmTypesArr.toString() + '</p>' +
                '       <p>导演：' + film.directorName + '</p>' +
                '       <p>上映时间：' + film.startTime + ' 至 ' + film.endTime + '</p>' +
                '       <hr class="layui-border-green">' +
                '       <p>内容简介：</p>' +
                '       <p>' + film.description + '</p>' +
                '   </div>' +
                '   ' +
                '</div>'
            ,yes: function (index, layero) {
                // layer.alert('点击了前往购票');
                $(location).attr('href', './BookTicketPage.html?filmId=' + filmId);
            }
        });

    }

    function generateHallsTable() {
        layui.use('table', function () {
            var table = layui.table;
            //第一个实例
            table.render({
                elem: '#halls-table'
                , height: 250
                , url: urlPrefix + '/film-info/getHallsInfoList' //数据接口
                // ,page: true //开启分页
                , parseData: function (res) { //res 即为原始返回的数据
                    return {
                        "code": res.status, //解析接口状态
                        "msg": res.desc, //解析提示文本
                        "count": res.data.length, //解析数据长度
                        "data": res.data //解析数据列表
                    };
                }
                , cols: [[ //表头
                    {field: 'hallId', title: '影厅ID', fixed: 'left', width: 100}
                    , {field: 'name', title: '影厅名称', width: 100}
                    , {field: 'seatNum', title: '总座位数', width: 100}
                    , {field: 'description', title: '放映厅类型', width: 120}
                    , {field: 'ticketPrice', title: '该影厅票价', width: 100}
                    , {
                        field: 'filmIds', title: '放映影片',
                        templet: function (d) {
                            var filmIds = JSON.parse(d.filmIds);
                            var filmNames = getNamesByFilmId(filmIds, filmArr);
                            // console.log(filmNames);
                            return JSON.stringify(filmNames)
                        }
                    }
                    , {field: 'filmTimePeriods', title: '放映时段'}
                ]]
            });
        })
    }

    function getFilmByFilmId(filmId, filmArr) {
        for (var oneFilm of filmArr) {
            if (oneFilm.filmId === filmId) {
                return oneFilm;
            }
        }
        return null;
    }

    function getNamesByFilmId(filmIds, filmArr) {
        var filmNames = []
        for (var filmId of filmIds) {
            for (var oneFilm of filmArr) {
                if (oneFilm.filmId === filmId) {
                    filmNames.push(oneFilm.name);
                    break;
                }
            }
        }
        return filmNames;
    }

    function getHallByHallId(hallId, hallArr) {
        for (var oneHall of hallArr) {
            if (oneHall.hallId === hallId) {
                return oneHall;
            }
        }
        return null;
    }

    function activateFilmDetailSearchForm() {

        layui.use(['laydate', 'form'], function () {
            var laydate = layui.laydate;
            var form = layui.form;
            //激活表单日期组件
            laydate.render({
                elem: '#showDate'
            })


            //在电影名称和影厅id搜索框中填充选项内容
            //生成电影名称选择框html
            var filmNameSelectBoxHtml = '<option value=""></option>';
            for (var oneFilm of filmArr) {
                filmNameSelectBoxHtml+=
                    '<option value="' + oneFilm.filmId + '">' + oneFilm.name + '</option>'
            }
            //生成影厅名称选择框html
            var hallNameSelectBoxHtml = '<option value=""></option>';
            for (var oneHall of hallArr) {
                hallNameSelectBoxHtml+=
                    '<option value="' + oneHall.hallId + '">' + oneHall.name + '</option>'
            }

            //填充html
            $('#film-name-select-box').html(filmNameSelectBoxHtml);
            $('#hall-name-select-box').html(hallNameSelectBoxHtml);
            //动态更改表单元素后，需要手动刷新生效
            form.render();


            //监听表单的提交
            //监听提交
            form.on('submit(film-detail-search-form)', function (data) {
                // console.log(JSON.stringify(data.field));
                // layer.msg(JSON.stringify(data.field));
                console.log(data.field);
                var formData = {
                    'filmId': data.field.filmId,
                    'hallId': data.field.hallId,
                    'showDate': data.field.showDate
                }

                axios({
                    method: 'get',
                    url: urlPrefix + '/film-info/getFilmShowDetail',
                    params: formData
                }).then(res => {
                    // console.log('filmDetail', res);
                    if (res.data.status === 0) {
                        //如果返回内容是空，就提示
                        if (res.data.data === null) {
                            layer.msg('未查询到任何电影详情信息<br>请查看表单参数是否正确');
                        }
                        //查到内容的话，就把内容渲染到界面表格中
                        else {
                            var filmDetail = res.data.data;
                            // layer.alert(JSON.stringify(filmInfo));
                            console.log('filmDetail', filmDetail);
                            openFilmDetailInfoLayer(filmDetail, data.field.filmId, data.field.hallId, data.field.showDate);

                        }
                    } else {
                        //失败就打印异常信息
                        layer.msg(res.data.desc);
                    }
                });
                return false;
            });
        });
    }

    function openFilmDetailInfoLayer(filmDetail, filmId, hallId, showDate) {
        var film = getFilmByFilmId(filmId, filmArr);
        var hall = getHallByHallId(hallId, hallArr);
        console.log(hall);
        layer.open({
            type: 1
            ,title: film.name//不显示标题栏
            // ,closeBtn: true
            ,area: ['600px', '400px']
            ,shade: 0.5
            ,id: 'film-detail-layer' //设定一个id，防止重复弹出
            ,btn: ['前往购票', '我再看看']
            ,btnAlign: 'c'
            ,moveType: 1 //拖拽模式，0或者1
            ,content:
                '<table id="film-detail-table" lay-filter="film-detail-table"></table>'
            ,yes: function (index, layero) {
                // layer.alert('点击了前往购票');
                $(location).attr('href', './BookTicketPage.html?filmId=' + filmId);
            }
        });
        //渲染详情弹层中的数据表格
        var tableHeadHtml =
            '<thead>' +
            '   <tr>' +
            '      <th lay-data="{field: \'hallName\'}">影厅</th>' +
            '      <th lay-data="{field: \'showDate\'}">日期</th>' +
            '      <th lay-data="{field: \'showTime\'}">时段</th>' +
            '      <th lay-data="{field: \'ticketPrice\'}">票价</th>' +
            '      <th lay-data="{field: \'remainingTickets\'}">剩余票数</th>'
            '   </tr>' +
            '</thead>';
        var tableBodyHtml = '<tbody>';
        for (var item of filmDetail.ticketsCondition) {
            tableBodyHtml +=
                '<tr>' +
                '   <td>' + hall.name + '</td>' +
                '   <td>' + showDate + '</td>' +
                '   <td>' + item.showTime + '</td>' +
                '   <td>' + item.ticketPrice + '</td>' +
                '   <td>' + item.remainingTickets + '</td>' +
                '</tr>'
        }
        tableBodyHtml += '</tbody>'
        $('#film-detail-table').html(tableHeadHtml + tableBodyHtml);

        //将普通的表格渲染成layui表格
        layui.use('table', function () {
            var table = layui.table;

            table.init('film-detail-table', {
                // height: 315 //设置高度
                // , limit: 8 //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
                // //支持所有基础参数
                // , toolbar: '#orderToolBar'
            });
        })

    }

</script>
<script>
    layui.use('element', function () {
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
    });
</script>
</body>
</html>